<script setup>
    import { onMounted } from 'vue'
    import { getPostStationLis } from '@/common/apis'
    import Monitoring from './Monitoring.vue'

    import positionIcon from '../../assets/images/service/position-icon-1.png'
    import positionIcon2 from '../../assets/images/service/position-icon-2.png'

    let areaPositionIndex = {
        '山东省': '117.026435,36.67742',
        '济南市': '117.126541,36.6584',
        '青岛市': '120.389104,36.073007',
        '淄博市': '118.06151,36.819783',
        '枣庄市': '117.330325,34.816735',
        '东营市': '118.680936,37.440335',
        '烟台市': '121.454196,37.4709',
        '潍坊市': '119.16816,36.714439',
        '济宁市': '116.59385,35.420782',
        '泰安市': '117.093464,36.206342',
        '威海市': '122.127119,37.519116',
        '日照市': '119.533275,35.423421',
        '临沂市': '118.363007,35.10964',
        '德州市': '116.365837,37.442306',
        '聊城市': '115.992104,36.461728',
        '滨州市': '117.977131,37.389007',
        '菏泽市': '115.486191,35.2401'
    }

    // 创建Map实例
    let map = undefined

    let resData = $ref([])


    onMounted(() => {
        getPostStationLis().then(res => {
            resData = res.result
            init()
        })
        init()
    })

    const init = () => {
        let arr = resData.map((item) => {
            if(!item.coordinate) return []
            else return [item.coordinate.split(',')[0], item.coordinate.split(',')[1]]
        })


        map = new BMapGL.Map("container");            // 创建Map实例
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  
        map.setMapType(BMAP_SATELLITE_MAP);

        var point = new BMapGL.Point(117.330234,34.816379);    // 创建点坐标
        map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。
        setPositionPoint(arr, resData)
    }

    // 设置坐标点
    const setPositionPoint = (arr, data) => {
        map.clearOverlays()

        var myIcon = new BMapGL.Icon(positionIcon, new BMapGL.Size(36, 59));
        var myIcon2 = new BMapGL.Icon(positionIcon2, new BMapGL.Size(36, 59));

        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            var pt = new BMapGL.Point(...arr[i]);
            var marker = new BMapGL.Marker(pt, {
                icon: data[i].type == 1 ? myIcon2 : myIcon2
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, -65), // 设置文本偏移量
            };
            var label = new BMapGL.Label(data[i].name, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "16px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                fontWeight :"bold",
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            map.addOverlay(label);
            map.addOverlay(marker)

            // 鼠标点击坐标
            marker.addEventListener('click', function (e) {
                details = data[i]
                dialogVisible = true
            })
        }
    }


    // 设置地图中心店
    const setMapCenterPoint = (name) => {
        // 创建点坐标
        let pointArray = areaPositionIndex[name]
        var point = new BMapGL.Point(pointArray.split(',')[0], pointArray.split(',')[1]);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 15); 
    }

    // 显示当前搜索驿站 
    const setPostMapCenterPoint = (keyword, type) => {
        if(keyword){
            let data = []
            if(type == 'coordinates'){
                data = [{ coordinate: keyword }]
            }else{
                data = resData.filter((item) => {
                    return item.name.indexOf(keyword) > -1
                })
            }

            if(data && data.length){
                let coordinate = data[0].coordinate
                let point = new BMapGL.Point(coordinate.split(',')[0], coordinate.split(',')[1])
                map.centerAndZoom(point, 17)
            }
        }else{
            resetPoint()
        }
    }

    // 只显示品牌驿站
    const mapShowBrand = (show) => {
        let arr = []
        let data = resData
        if(show) {
            data = resData.filter(item => {
                return item.type == 3
            })
        }

        arr = data.map((item) => {
            if(!item.coordinate) return []
            else return [item.coordinate.split(',')[0], item.coordinate.split(',')[1]]
        })

        var point = new BMapGL.Point(117.39458,34.717326);    // 创建点坐标
        map.centerAndZoom(point, 13);        

        setPositionPoint(arr, data)
    }

    // 重置坐标
    const resetPoint = () => {
        // 创建点坐标
        var point = new BMapGL.Point(117.330234,34.816379);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 16); 
    }

    // 获取区域中间点
    const mapGetCenter = (pointArray) => {
        var sortedLongitudeArray = pointArray.map(item => item[1]).sort();//首先对经度进行排序，红色部分是array中经度的名称
        var sortedLatitudeArray = pointArray.map(item => item[0]).sort();//对纬度进行排序，红色部分是array中纬度的名称
        var centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
        const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);

        //如果经纬度在array中不是数字类型，需要转化为数字类型进行计算，如果是可以去掉parseFloat处理
        //console.log(centerLongitude+"kkk"+centerLatitude);
        return [centerLatitude, centerLongitude];
    }

    // 驿站信息
    let dialogVisible = $ref(false)
    let details = $ref({})

    // 视频监控
    let monitoring = $ref(null)
    const handleClickVideo = () => {
        monitoring.showVideo(details.id)
    }

    // 是否全屏显示vr
    let isFull = $ref(false)

    // vr
    let vrDialogVisible = $ref(false)

    const handleClickVr = () => {
        vrDialogVisible = true
    }


    defineExpose({
        setMapCenterPoint,
        setPostMapCenterPoint,
        mapShowBrand
    })


</script>

<template>
    <div class="party-building-map-wrap">
        <div id="container"></div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        title="驿站信息"
        width="566px"
        custom-class="party-info-dialog"
    >
        <ul class="info-warp">
            <li>驿站名称：<span>{{ details.name }}</span></li>
            <li class="info-right">类型：驿站</li>
            <li>编号：{{ details.sysOrgCode }}</li>
            <li class="info-right">联系电话：{{ details.phone }}</li>
        </ul>
        <div class="btn-wrap flex-center">
            <div class="btn" @click="handleClickVr">VR全景</div>
            <div class="btn" @click="handleClickVideo">视频监控</div>
        </div>
    </el-dialog>

    <!-- vr -->
    <el-dialog
        v-model="vrDialogVisible"
        v-if="vrDialogVisible"
        title="VR全景"
        :width="isFull ? '100%' : '1400px'"
        custom-class="vr-info-dialog"
    >
        <img src="../../assets/images/service/full-screen.png" v-show="!isFull" @click="isFull=true">
        <img src="../../assets/images/service/reduce-screen.png" v-show="isFull" @click="isFull=false">
        <iframe 
            :style="{width: '100%', height: isFull ? '900px' : '800px'}" 
            :src="details.vrUrl ? details.vrUrl : 'https://quanjingtong.cn/t/zz16gpz3k2w?scene_id=3438'" 
            frameborder="0"></iframe>
    </el-dialog>

    <!-- 监控 -->
    <monitoring ref="monitoring"></monitoring>

</template>

<style lang="less" scoped>
    .party-building-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
</style>


<style lang="less">
    .party-info-dialog.el-dialog{
            background: url('../../assets/images/service/card-bg.png') center no-repeat;
            background-size: 100% 100%;

            .el-dialog__title, .el-dialog__close{
                color: #fff;
            }
            .el-dialog__title{
                margin-left: 10px;   
            }

            .info-warp{
                margin: -20px 20px 0 20px;
                padding: 20px;
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
                display: flex;
                flex-wrap: wrap;

                li{
                    width: 60%;
                    line-height: 20px;
                    padding: 14px 0;
                    display: flex;

                    span{
                        width: 140px;
                    }

                    &.info-right{
                        width: 40%;
                    }
                }
            }

            .btn-wrap{
                margin: 20px 0;

                .btn{
                    width: 140px;
                    height: 46px;
                    line-height: 46px;
                    background: #00A4FF;
                    border-radius: 4px;
                    color: #fff;
                    font-size: 16px;
                    margin: 0 8px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }

        .vr-info-dialog{
            img{
                position: absolute;
                top: 20px;
                right: 60px;
                z-index: 99;
                cursor: pointer;
            }
        }
</style>